<template>
  <div>
    <customDialog
      :title="`${operaName}-修改最大收费卡点`"
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      @confirm="confirm"
      width="800"
    >
      <div class="box_wrapper">
        <el-form
          ref="ruleFormRef"
          :model="formData"
          label-position="left"
          label-width="140px"
          class="form_box"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item label="最大收费卡点">
                <el-input-number
                  v-model="formData.chargeEpisodeNoUpperLimit"
                  :max="formData?.maxNum"
                  :min="0"
                />
                <span class="tips">不可超过剧目总集数</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="每集最低单价(金币)">
                <el-input-number
                  v-model="formData.unblockCoinAmountMinLimit"
                  :min="1"
                  :max="10000"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="全集最底价格(金币)">
                <el-input-number
                  v-model="formData.unblockOperaCoinMinLimit"
                  :min="0"
                  :max="10000"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import { ref, reactive } from "vue";
import { paymentLimit } from "@/api/operateCenter/distributorEpisode/index";
import { ElTag, ElMessage } from "element-plus";
import { cloneDeep, debounce } from "lodash-es";

const dialogVisible = ref(false);
const form = {
  id: 0,
  chargeEpisodeNoUpperLimit: undefined,
  unblockCoinAmountMinLimit: undefined,
  unblockOperaCoinMinLimit: undefined,
  maxNum: 0,
};
const formData = ref(Object.assign({}, form));
const operaName = ref<String>("");

const emit = defineEmits(["success"]);
const confirm = debounce(() => {
  let params = {
    id: formData.value.id,
    limitObj: {
      chargeEpisodeNoUpperLimit: formData.value.chargeEpisodeNoUpperLimit,
      unblockCoinAmountMinLimit: formData.value.unblockCoinAmountMinLimit,
      unblockOperaCoinMinLimit: formData.value.unblockOperaCoinMinLimit,
    },
  };
  if (!formData.value.unblockOperaCoinMinLimit) {
    return ElMessage.error("全集最低价格不能为空");
  }
  paymentLimit(params).then(() => {
    emit("success");
    ElMessage.success("修改成功");
    dialogVisible.value = false;
  });
}, 300);

// 父级电子显示dialog
const showDialog = (val: any) => {
  console.log("---显示分配分销商----**----", val);
  operaName.value = val.name;
  formData.value.id = val.id;
  formData.value.chargeEpisodeNoUpperLimit = val?.chargeEpisodeNoUpperLimit;
  formData.value.unblockCoinAmountMinLimit = val?.unblockCoinAmountMinLimit;
  formData.value.unblockOperaCoinMinLimit =
    val?.unblockOperaCoinMinLimit || undefined;
  formData.value.maxNum = val?.updateEpisodeNo || 0;
  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.tips {
  margin-left: 12px;
  font-size: 12px;
  color: #aaa;
}
</style>
